<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="style/index.css">
        <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.6.4/dist/g6.min.js"></script>
    </head>
<body style="margin:0">
    <div id="app">
        <el-container>
            <el-menu default-active="1"
                     class="el-menu-vertical-demo"
                     :collapse="isCollapsed"
                     background-color="#475074"
                     text-color="#878faf"
                     active-text-color="#fff">
                <div class="aside-header">
                    <i class="el-icon-s-promotion " style="font-size: 30px"></i>
                </div>
                <el-menu-item index="1" onclick="location='/'" >
                    <i class="el-icon-s-marketing"></i>
                    <span slot="title">数据看板</span>
                </el-menu-item>
                <el-menu-item index="2" >
                    <i class="el-icon-lightning"></i>
                    <span slot="title">故障中心</span>
                </el-menu-item>
                <el-menu-item index="3" >
                    <i class="el-icon-share"></i>
                    <span slot="title">节点状态管理</span>
                </el-menu-item>
                <el-menu-item index="4" >
                    <i class="el-icon-s-order"></i>
                    <span slot="title">日志数据管理</span>
                </el-menu-item>
                <el-menu-item index="5" onclick="location='/model'">
                    <i class="el-icon-first-aid-kit"></i>
                    <span slot="title">诊断模型管理</span>
                </el-menu-item>
            </el-menu>
            <div class="aside-header" id="sysTitle" style="position: absolute; margin-left: 35px" ><b>智能运维系统</b></div>
            <el-container>
            <el-header style="text-align: right; font-size: 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 1px" >
                <div style="float: left; font-size: 20px">
                    <i class="el-icon-s-fold " @click="handleCollapsed" id="foldButton"></i>
                </div>
                <div style="height: 54px; float: right; display:flex;align-items:center;">
                    <el-avatar src="img/head.jpeg" class="el-header-items"></el-avatar>
                    <span class="el-header-items">{{name}}</span>
                    <el-dropdown>
                        <i class="el-icon-caret-bottom el-header-items" style="margin-right: 15px; "></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人空间</el-dropdown-item>
                            <el-dropdown-item>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <el-row :gutter = 20>
                    <el-col :span=6>
                        <el-card class="sumup sumup-mid">
                            <el-row :gutter=20 style="margin-bottom: 0px">
                                <el-col :span=6>
                                    <img src="img/log2.png" width="40px"/>
                                </el-col>
                                <el-col :span=18>
                                    <div> 事件数</div>
                                    <div class="sumup-num">
                                        29630
                                        <span class="levelup"><i class="el-icon-caret-top"></i>15</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>

                    </el-col>
                    <el-col :span=6>
                        <el-card class="sumup sumup-mid">
                            <el-row :gutter=20 style="margin-bottom: 0px">
                                <el-col :span=6>
                                    <img src="img/exception2.png" width="40px"/>
                                </el-col>
                                <el-col :span=18>
                                    <div> 异常数</div>
                                    <div class="sumup-num">
                                        7689
                                        <span class="levelup"><i class="el-icon-caret-top"></i>10</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span=6>
                        <el-card class="sumup sumup-mid">
                            <el-row :gutter=20 style="margin-bottom: 0px">
                                <el-col :span=6>
                                    <img src="img/handle2.png" width="40px"/>
                                </el-col>
                                <el-col :span=18>
                                    <div> 未处理</div>
                                    <div class="sumup-num">
                                        533
                                        <span class="levelup"><i class="el-icon-caret-bottom"></i>5</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span=6>
                        <el-card class="sumup sumup-mid">
                            <el-row :gutter=20 style="margin-bottom: 0px">
                                <el-col :span=6>
                                    <img src="img/node2.png" width="40px"/>
                                </el-col>
                                <el-col :span=18>
                                    <div> 节点规模</div>
                                    <div class="sumup-num">
                                        4367
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>

                <div><h3>服务拓扑</h3></div>
                <el-row>
                    <el-card style="position: relative">
                        <el-row>
                            <el-radio-group v-model="isMetrics"
                                            style="float: right"
                                            @change="getTopoByType">
                                <el-radio-button :label='0'>日志诊断</el-radio-button>
                                <el-radio-button :label='1'>指标诊断</el-radio-button>
                            </el-radio-group>
                        </el-row>
                        <el-row>
                            <transition name="el-fade-in-linear">
                                <el-card  v-show="serviceInfoShow"  class="service-info">
                                    <div class="text-extra-large"><b>{{service.name}}</b></div>
                                    <div style="width: 20px; height: 3px; background: white; margin-bottom: 30px"></div>
                                    <div class="text-base">主机地址 {{service.host}}</div>
                                    <div class="text-base">服务状态 {{service.status}}</div>
                                </el-card>
                            </transition>

                            <div id="container"></div>
                        </el-row>

                    </el-card>
                </el-row>

                <el-row>
                    <el-card>
                        <el-row :gutter = 20>
                            <el-col :span=19>
                                <el-cascader
                                        :options="conditions"
                                        :props="props"
                                        @change="handleConditionChange"
                                        v-model="conditionValue"
                                        style="width: 100%">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-cascader>
                            </el-col>
                            <el-col :span=5>
                                <el-button>清除</el-button>
                                <el-button type="primary" icon="el-icon-refresh-right" circle></el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    max-height="750">
                                <el-table-column
                                        fixed
                                        prop="id"
                                        label="ID"
                                        width="200">
                                </el-table-column>
                                <el-table-column
                                        prop="type"
                                        label="类型"
                                        width="120">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.type===0"> 日志 </div>
                                        <div v-else> 指标 </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="level"
                                        label="等级"
                                        width="120">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.level===0"> 一般 </div>
                                        <div v-else-if="scope.row.level===1"> 严重 </div>
                                        <div v-else-if="scope.row.level===2"> 紧急 </div>
                                        <div v-else> 待诊断 </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="content"
                                        label="内容"
                                        width="840">
                                </el-table-column>
<!--                                <el-table-column-->
<!--                                        prop="service_ip"-->
<!--                                        label="上报主机"-->
<!--                                        width="120">-->
<!--                                </el-table-column>-->
                                <el-table-column
                                        prop="service_name"
                                        label="所属服务"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        fixed="right"
                                        label="标记为"
                                        width="110">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.status"
                                                   placeholder="未处理"
                                                   type="info"
                                                   size="small">
                                            <el-option
                                                    v-for="item in processLabel"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        fixed = "right"
                                        width = "80">
                                    <template slot-scope="scope">
                                        <el-button
                                                @click=reviewExpDetail(scope.row.id,scope.row.service_id,scope.row.type)
                                                type="text"
                                                size="small">
                                            查看详情
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-row>

                        <el-pagination
                                @current-change="handleCurrentChange"
                                background
                                layout="prev, pager, next"
                                :current-page.sync="currentExpPage"
                                :total="expPage">
                        </el-pagination>

                    </el-card>
                </el-row>
                <el-row></el-row>
            </el-main>
        </el-container>
        </el-container>
        <el-drawer
            title="异常详情"
            :visible.sync="drawer"
            :with-header="true"
            size="60%">
            <div style="padding-left: 25px" v-loading="loading">
            <el-row>
                <span class="tip">异常编号: {{exception.id}}</span>
            </el-row>
            <el-row class="sumup-left">
                <el-col :span=6 >
                    异常类型: 日志
                </el-col>
                <el-col :span=9>
                    上报主机: {{exception.host}}
                </el-col>
                <el-col :span=9>
                    上报服务: {{exception.service}}
                </el-col>
            </el-row>
            <el-row class="sumup-left">
                <el-col :span=6 >
                    上报次数: {{exception.report_sum}}
                </el-col>
                <el-col :span=9>
                    首次上报时间: {{exception.first_report_time}}
                </el-col>
                <el-col :span=9>
                    最后上报时间: {{exception.last_report_time}}
                </el-col>
            </el-row>
            <el-tabs v-model="activeName" @tab-click="handleClickTab">
                <el-tab-pane label="异常日志" name="first">
                    <el-row>
                        <el-alert
                                style="white-space: pre-wrap"
                                type="info">{{exception.content}}</el-alert>
                    </el-row>
                    <el-button style="float: right; margin-right: 20px"
                               type="text" @click="dialogVisible = true">查看全文</el-button>
                    <el-table
                            :data="logData"
                            style="width: 100%"
                            fit='false'
                            max-height="400"
                            :header-row-class-name="tableHeadClassName">
                        <el-table-column
                                prop="content"
                                label="历史日志"
                                width="700">
                        </el-table-column>
                        <el-table-column
                                width = "80">
                            <el-button
                                    @click="dialogVisible = true"
                                    type="text"
                                    size="small">
                                查看原文
                            </el-button>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @current-change="handleLogChange"
                            background
                            layout="prev, pager, next"
                            :total="logSum">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="根因诊断" name="second">
                    <el-row>
                        <span>传播链路</span>
                    </el-row>
                    <el-timeline>
                        <el-timeline-item
                                v-for="(activity, index) in activities"
                                :key="index"
                                :icon="activity.icon"
                                :type="activity.type"
                                :color="activity.color"
                                :size="activity.size"
                                :timestamp="activity.timestamp">
                            <el-card shadow="never" style="background: #f5f6fd">
                                <div class="sumup-num" style="font-size: 16px">日志 #{{activity.id}}</div>
                                <div class="clear sumup-left">
                                    {{activity.content}}
                                </div>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                    <el-row>
                        <span>影响范围</span>
                    </el-row>
                    <div id="logGraph"></div>
                </el-tab-pane>
            </el-tabs>


        </div>
    </el-drawer>
        <el-dialog
                title="日志记录"
                :visible.sync="dialogVisible"
                width="70%">
            <el-container style="height: 500px">
                <el-main style="background: white; white-space: pre-wrap">
                    <div>2021-12-11 14:49:02,894 - org.apache.skywalking.oap.server.library.module.BootstrapFlow - 46 [main] INFO  [] - start the provider default in alarm module.</div>
                    <div>2021-12-11 14:49:02,894 - org.apache.skywalking.oap.server.library.module.BootstrapFlow - 46 [main] INFO  [] - start the provider default in event-analyzer module.</div>
                    <div>2021-12-11 14:49:02,913 - org.apache.skywalking.oap.server.core.analysis.DispatcherManager - 117 [main] INFO  [] - Dispatcher org.apache.skywalking.oap.server.core.source.oal.rt.dispatcher.EventDispatcher is added into DefaultScopeDefine 43.</div>
                    <div>2021-12-11 14:49:02,913 - org.apache.skywalking.oap.server.library.module.BootstrapFlow - 46 [main] INFO  [] - start the provider mysql in storage module.</div>
                    <div>2021-12-11 14:49:02,914 - org.apache.skywalking.oap.server.library.server.grpc.GRPCServer - 119 [main] INFO  [] - Server started, host 0.0.0.0 listening on 11800</div>
                    <div>2021-12-11 14:49:02,915 - com.zaxxer.hikari.HikariDataSource - 80 [main] INFO  [] - HikariPool-1 - Starting...</div>
                    <div>2021-12-11 14:49:02,920 - org.eclipse.jetty.util.log - 169 [main] INFO  [] - Logging initialized @15494ms to org.eclipse.jetty.util.log.Slf4jLog</div>
                    <div style="background: #edf0f9">{{exception.content}}</div>
                </el-main>
            </el-container>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-drawer
                title="指标详情"
                :visible.sync="metricDrawer"
                :with-header="true"
                size="60%">
            <div style="padding-left: 25px">
                <el-row>
                    <span class="tip">异常编号: {{exception.id}}</span>
                </el-row>
                <el-row class="sumup-left">
                    <el-col :span=6 >
                        指标: {{metricDetail.content}}
                    </el-col>
                    <el-col :span=9>
                        ID: {{metricDetail.metric_id}}
                    </el-col>
                    <el-col :span=9>
                        上报服务: {{metricDetail.service_name}}
                    </el-col>
                </el-row>
                <el-row>
                    <span>传播链路</span>
                </el-row>
                <el-timeline>
                    <el-timeline-item
                            v-for="(activity, index) in metricDetail.metrics_link"
                            :key="index"
                            :icon="activity.icon"
                            :type="activity.type"
                            :color="activity.color"
                            :size="activity.size"
                            :timestamp="activity.timestamp">
                        <el-card shadow="never" style="background: #f5f6fd">
                            <div class="sumup-num" style="font-size: 16px"> 服务 - {{activity.label}} </div>
                            <div class="sumup-left">指标 - {{metricDetail.content}}</div>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>


            </div>
        </el-drawer>
    </div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/element.js"></script>
<script src="js/vue-resource.js"></script>
<script>
        var vm = new Vue({
            el:'#app',
            data:{
                service:{},
                serviceInfoShow: false,
                drawer: false,
                dialogVisible: false,
                isCollapsed: false,
                isMetrics: 0,
                name: null,
                logData:[],
                tableData: [],
                relativeData: [],
                exception:{},
                metricDetail:{},
                metricDrawer:false,
                props: { multiple: true },
                conditionValue: [],
                graphData: [],
                graph: null,
                logGraph: null,
                logSum: 10,
                expPage: 10,
                loading: false,
                currentExpPage: 0,
                conditions: [{
                    value: "service",
                    label: '服务节点',
                    children: []
                }, {
                    value: "status",
                    label: '状态',
                    children: [
                        { value: 0, label: '未处理' },
                        { value: 1, label: '已处理' },
                        { value: 2, label: '非异常' }
                    ]
                }],
                processLabel: [
                    { value: 0, label: '未处理' },
                    { value: 1, label: '已处理' },
                    { value: 2, label: '非异常' }
                ],
                value: 1,
                activeName: 'first',
                activities: [],
                value2: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            },
            mounted() {
                //发送get请求
                var formData = new FormData();
                formData.append('name', '管理员');

                // this.$http.post('/api', formData)
                this.$http.post('http://119.29.92.219:8090/user',formData).then(function(res){
                    console.log(res)
                    this.name = res.body.name
                },function(){
                    console.log('请求失败处理');
                });
                this.handleConditionChange(this.conditionValue)
                this.$http.get('http://119.29.92.219:8090/metricAndLogServiceTopo').then(function(res){
                    console.log(res.body)
                    let response = res.body.logs
                    for(let i=0; i<response.nodes.length; i++) {
                        let node = response.nodes[i]
                        vm.conditions[0].children.push({value:node.id, label:node.label})
                    }
                    this.graphData.push(res.body.logs)
                    this.graphData.push(res.body.metrics)
                    this.buildTopo(response)
                },function() {
                    console.log('请求失败处理');
                });

                // 异常通知
                var socket = new WebSocket("ws://43.138.33.183:15136/ws");
                socket.onopen = function () {
                    socket.send(JSON.stringify({ action: "connect", user: 'abnormal_log_msg' }))
                };
                let _this = this;
                socket.onmessage = function (e) {
                    var json_data = JSON.parse(e.data)
                    console.log(json_data.message)
                    _this.getNewException(json_data.message)
                };

                socket.onclose=function(e){
                    console.log(e);
                };
            },
            methods: {
                //消息提醒
                openNotify(title, type, message) {
                    this.$notify({
                        title: title,
                        message: message,
                        type: type,
                        position: "bottom-right",
                        duration: 0,
                        showClose: true,
                    });
                },
                //新增异常日志

                getNewException(data){
                    var js_data = JSON.parse(data);
                    console.log(js_data);
                    this.getExceptionList([],[],[],0)
                    this.openNotify('异常实践', 'error', '产生异常日志: '+js_data.content)
                },
                getExceptionList(services, levels, status, offset) {
                    var requestData = new FormData();
                    requestData.append('services', services);
                    requestData.append('levels', levels);
                    requestData.append('status', status);
                    requestData.append('offset', offset);
                    requestData.append('limit', 6);
                    requestData.append('type', this.isMetrics)
                    this.$http.post('http://119.29.92.219:8090/exception_categories', requestData).then(function(res){
                        console.log(res.body)
                        this.tableData = res.body
                    },function(){
                        console.log('请求失败处理');
                    });
                },
                setExpPage(services, status, levels,) {
                    var requestData = new FormData();
                    requestData.append('services', services);
                    requestData.append('levels', levels);
                    requestData.append('status', status);
                    requestData.append('type', this.isMetrics)
                    this.$http.post('http://119.29.92.219:8090/exception_sum', requestData).then(function(res){
                        console.log("pageSum ", res.body.exp_sum)
                        this.expPage = (res.body.exp_sum + 1) / 6 * 10
                    },function(){
                        console.log('请求失败处理');
                    });
                },
                handleCurrentChange(page) {
                    let service = []
                    let status = []
                    for (let i = 0; i < this.conditionValue.length; i++) {
                        if (this.conditionValue[i][0] === "service") {
                            service.push(this.conditionValue[i][1])
                        } else {
                            status.push(this.conditionValue[i][1])
                        }
                    }
                    this.getExceptionList(service,[],status, page-1)
                },
                handleLogChange(page) {
                    this.getLogs(this.exception.id, page-1, 5)
                },

                showServiceInfo(serviceID, serviceName, status) {
                    this.service.id=serviceID
                    this.service.name=serviceName
                    this.service.host = "192.168.0.1"
                    if (status === 0) {
                        this.service.status = "正常"
                    } else if (status === 1) {
                        this.service.status = "异常"
                    } else {
                        this.service.status = "故障"
                    }
                    this.serviceInfoShow = true
                },
                reviewlogExpDetail(id) {
                    console.log("ID:"+id)
                    this.loading = true
                    let requestData = new FormData();
                    requestData.append("id", id);
                    this.$http.post('http://119.29.92.219:8090/exception', requestData).then(function(res){
                        console.log(res.body)
                        this.logSum = res.body.exception.report_sum / 5 * 10
                        this.exception = res.body.exception
                        this.loading = false
                    },function(){
                        console.log('请求失败处理');
                    });
                    this.getLogs(id, 0, 5)
                    this.$http.post('http://119.29.92.219:8090/log_trace', requestData)
                        .then(function (res) {
                            console.log(res.body)
                            this.activities = res.body
                            let log = this.activities[this.activities.length-1]
                            log.type = 'primary'
                            log.icon = 'el-icon-more'
                            log.size = 'large'
                            this.activities[0].type='danger'
                            this.activities[0].size='large'
                        })
                    this.$http.post('http://119.29.92.219:8090/log_influence', requestData)
                        .then(function (res) {
                            console.log('log_influence')
                            console.log(res.body)
                            let data = res.body
                            this.buildLogTopo(data)
                        })
                    this.drawer = true
                    this.activeName = "first"
                },
                getLogs(categoryID, offset, limit) {
                    let requestData = new FormData();
                    requestData.append("category_id", categoryID);
                    requestData.append("offset", offset);
                    requestData.append("limit", limit);
                    this.$http.post('http://119.29.92.219:8090/history_logs', requestData)
                        .then(function (res) {
                            console.log(res.body)
                            this.logData = res.body.log_list
                        })
                },
                reviewMetricsDetail(id, service_id){
                    var requestData = new FormData();
                    requestData.append("metrics_id", id);
                    requestData.append("service_id", service_id);
                    console.log("service_id: " + service_id)
                    this.$http.post('http://119.29.92.219:8090/metricsException', requestData).then(function(res){
                        console.log(res.body)
                        this.metricDetail = res.body.Result
                        this.metricDetail.metrics_link[0].type='danger'
                        this.metricDetail.metrics_link[0].size='large'
                        for (let i = 1; i < this.metricDetail.metrics_link.length; i++){
                            let metric = this.metricDetail.metrics_link[i]
                            console.log("subject" + metric.subject)
                            if (metric.subject) {
                                metric.type = 'primary'
                                metric.icon = 'el-icon-more'
                                metric.size = 'large'
                            }
                        }
                    },function(){
                        console.log('请求失败处理');
                    });
                    this.metricDrawer = true

                },
                reviewExpDetail(id, service_id, type) {
                    if(type === 0) {
                        this.reviewlogExpDetail(id)
                    } else {
                        this.reviewMetricsDetail(id, service_id)
                    }

                },
                handleClickTab(tab, event) {
                    console.log(tab, event);
                },
                tableHeadClassName({row, rowIndex}) {
                    return 'log-table-head';

                },
                handleDialogClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {});
                },
                handleConditionChange(value) {

                    let service = []
                    let status = []
                    for (let i = 0; i < this.conditionValue.length; i++) {
                        if (this.conditionValue[i][0] === "service") {
                            service.push(this.conditionValue[i][1])
                        } else {
                            status.push(this.conditionValue[i][1])
                        }
                    }
                    this.currentExpPage = 1
                    this.getExceptionList(service,[],status, 0)
                    this.setExpPage(service,[],status)
                },
                handleCollapsed(event) {
                    this.isCollapsed = !this.isCollapsed
                    if (this.isCollapsed) {
                        document.getElementById("sysTitle").style.display="none"
                        document.getElementById("foldButton").className="el-icon-s-unfold"
                    } else {
                        document.getElementById("sysTitle").style.display="block"
                        document.getElementById("foldButton").className="el-icon-s-fold"
                    }
                },
                getTopoByType(label) {
                    this.getExceptionList([],[],[], 0)
                    this.buildTopo(this.graphData[label])
                },
                buildTopo(data) {
                    if (this.graph === null) {
                        const container = document.getElementById('container');
                        const width = container.scrollWidth;
                        const height = container.scrollHeight || 500;
                        this.graph = new G6.Graph({
                            container: 'container',
                            width,
                            height,
                            modes: {
                                default: ['drag-canvas', 'drag-node'],
                            },
                            animate: true,
                            defaultNode: {
                                size: 30,
                                labelCfg: {
                                    position: 'bottom',
                                },
                                style: {
                                    lineWidth: 2,
                                    stroke: '#5B8FF9',
                                    fill: '#C6E5FF',
                                },
                            },
                            defaultEdge: {
                                size: 1,
                                color: '#e2e2e2',
                                style: {
                                    endArrow: {
                                        path: 'M 0,0 L 8,4 L 8,-4 Z',
                                        fill: '#e2e2e2',
                                    },
                                },
                            },
                            layout: {
                                type: 'fruchterman',
                                gravity: 2,
                                gpuEnabled: true,
                                linkDistance: 50,
                                maxIteration: 300,
                            },
                        });
                    }

                    for(let i = 0; i < data.nodes.length; i++) {
                        let node = data.nodes[i]
                        if (node.status === 2) {
                            node.style = {
                                lineWidth: 2,
                                stroke: '#f34c4b',
                                fill: 'rgb(242,167,167)',
                            }
                        } else if (node.status === 1) {
                            let g = 140 - node.score
                            node.style = {
                                lineWidth: 2,
                                stroke: 'rgb(255,' + g + ',28)',
                                fill: 'rgb(255,224,167)',
                            }
                        }
                    }

                    for(let i = 0; i < data.edges.length; i++) {
                        let edge = data.edges[i]
                        if (edge.status === 2) {
                            edge.color = '#f34c4b'
                            // edge.style.endArrow.fill = '#f34c4b'
                        } else if (edge.status === 1) {
                            edge.color = 'rgb(255,140,28)'
                            // edge.style.endArrow.fill = 'rgb(255,140,28)'
                        }
                    }

                    this.graph.data(data);
                    this.graph.render();

                    if (typeof window !== 'undefined')
                        window.onresize = () => {
                            if (!this.graph || this.graph.get('destroyed')) return;
                            if (!container || !container.scrollWidth || !container.scrollHeight) return;
                            this.graph.changeSize(container.scrollWidth, container.scrollHeight);
                        };

                    this.graph.on('node:click', function(evt) {
                        let node = evt.item;
                        let model = node.getModel();
                        model.oriLabel = model.label;
                        vm.graph.setItemState(node, 'click', true);
                        // vm.getExceptionList([model.id],[],[],0)
                        vm.showServiceInfo(model.id, model.label, model.status)
                        vm.conditionValue = [
                            ["service",model.id]
                        ]
                        vm.handleConditionChange(vm.conditionValue)
                    });


                },
                buildLogTopo(data) {
                    if (this.logGraph === null) {
                        const container = document.getElementById('logGraph');
                        const width = container.scrollWidth;
                        const height = container.scrollHeight || 500;
                        this.logGraph = new G6.Graph({
                            container: 'logGraph',
                            width:600,
                            height:400,
                            modes: {
                                default: ['drag-canvas', 'drag-node'],
                            },
                            animate: true,
                            defaultNode: {
                                size: 30,
                                labelCfg: {
                                    position: 'bottom',
                                },
                                style: {
                                    lineWidth: 2,
                                    stroke: '#5B8FF9',
                                    fill: '#C6E5FF',
                                },
                            },
                            defaultEdge: {
                                size: 1,
                                color: '#e2e2e2',
                                style: {
                                    endArrow: {
                                        path: 'M 0,0 L 8,4 L 8,-4 Z',
                                        fill: '#e2e2e2',
                                    },
                                },
                            },
                            layout: {
                                type: 'fruchterman',
                                gravity: 2,
                                gpuEnabled: true,
                                linkDistance: 50,
                                maxIteration: 300,
                            },
                        });
                        console.log("new logTopo")
                    }

                    for(let i = 0; i < data.nodes.length; i++) {
                        let node = data.nodes[i]
                        let red = 255-(node.status)/100*13
                        let green = 167+(node.status)/100*57
                        node.style = {
                            lineWidth: 2,
                            fill: 'rgb('+red+','+green+',167)',
                        }
                    }

                    this.logGraph.data(data);
                    this.logGraph.render();

                    if (typeof window !== 'undefined')
                        window.onresize = () => {
                            if (!this.logGraph || this.logGraph.get('destroyed')) return;
                            if (!container || !container.scrollWidth || !container.scrollHeight) return;
                            this.logGraph.changeSize(container.scrollWidth, container.scrollHeight);
                        };

                    this.logGraph.on('node:click', function(evt) {
                        // let node = evt.item;
                        // let model = node.getModel();
                        // model.oriLabel = model.label;
                        // vm.graph.setItemState(node, 'click', true);
                        // vm.getExceptionList([model.id],[],[])
                        // vm.showServiceInfo(model.id, model.label, model.status)
                        // vm.conditionValue = [
                        //     [startValue,model.id]
                        // ]
                    });
                }
            }
        });
</script>
<style>
    .text-base {
        font-size: 14px;
        line-height: 21px;
        height: 21px;
    }
    .text-extra-large {
        font-size: 20px;
        line-height: 34px;
        height: 34px;
    }
    .aside-header {
        color: white;
        height: 60px;
        line-height: 60px;
        padding-left: 18px;
    }
    .el-menu-item.is-active {
        background-color: #5473e8 !important;
    }
    .el-card {
        border: inherit;
    }
    .service-info {
        border-radius: 10px;
        width: 250px;
        height: 170px;
        background-image: url('img/service_info_bg.png');
        padding-top: 0; !important;
        color: white;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        position: absolute;
    }
    .el-header {
        background-color: white;
        color: #333;
        line-height: 54px;
        height: 54px;
        vertical-align: middle;
    }

    .el-menu {
        color: #878faf;
        background-color: #475074;
    }
    .menu-bt {
        color: #878faf;
        text-decoration: none;|
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 300px;
        min-height: 400px;
    }

    .el-main {
        background-color: #edf0f9;
    }

    .el-row {
        margin-bottom: 20px;
    }
    .el-header-items {
        margin-left: 10px;
    }
    .tip {
        border-left: 5px solid #5777e5;
        padding-left: 14px
    }
    .sumup {
        /*text-align: center;*/
        color: #8da1b4;
        font-size: 14px;
    }
    .sumup-left {
        color: #8da1b4;
        font-size: 14px;
    }
    .sumup-mid {
        /*border-right: 1px solid #e4ebf0;*/
    }
    .sumup-num {
        color: #252631;
        font-size: 28px;
        font-weight: 800;
        /*line-height: 66px;*/
    }
    .levelup {
        color: #f34c4b;
        font-weight: normal;
        font-size: 14px;
    }
    .leveldown {
        color: #24d9b8;
        font-weight: normal;
        font-size: 14px;
    }
    .log-table-head {
        color: #5777e5;
    }
</style>
</html>